<template>
  <el-dialog
    :visible.sync="isImportTemplate"
    :close-on-click-modal="false"
    width="1024px"
    append-to-body
    :before-close="handleClose"
  >
    <el-form ref="form" :model="form">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="业务类型" label-width="80px" prop="businessType">
              <el-select v-model="form.businessType" placeholder="">
                <el-option label="A100-普通汇兑" value="1"></el-option>
                <el-option label="A101-公益性资金汇划" value="2"></el-option>
                <el-option label="A102-国库汇款" value="3"></el-option>
                <el-option label="A108-现金汇款" value="4"></el-option>
                <el-option label="A109-委托收款（划回）" value="5"></el-option>
                <el-option label="A110-托收承付（划回）" value="6"></el-option>
                <el-option label="A204-银行本票" value="7"></el-option>
                <el-option label="A112-外汇清算" value="8"></el-option>
                <el-option label="A113-跨境支付" value="9"></el-option>
                <el-option label="A201-支票" value="10"></el-option>
                <el-option label="A201-支票" value="11"></el-option>
                <el-option label="A203-银行汇票" value="12"></el-option>
                <el-option label="A111-商业汇票" value="13"></el-option>
              </el-select>
            </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="付款人账号" label-width="80px" prop="payerAccount">
            <el-input placeholder="请输入付款人账号" v-model="form.payerAccount" />
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="付款人名称" label-width="80px" prop="payerName">
            <el-input placeholder="请输入付款人名称" v-model="form.payerName" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="收款人账号" label-width="80px" prop="payeeAccount">
            <el-input placeholder="请输入收款人账号" v-model="form.payeeAccount" />
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="收款人名称" label-width="80px" prop="payeeName">
            <el-input placeholder="请输入收款人名称" v-model="form.payeeName" />
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="search(form)">搜索</el-button>
            <el-button @click="reset">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>

      <el-table :data="tableData" style="width: 100%; margin-top: 0px" height="350px">
        <el-table-column fixed label="操作" width="160" align="center">
          <template slot-scope="scope">
            <el-button @click.native.prevent="choose(scope.$index, tableData)" type="text" size="small">选择</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="businessType" label="业务类型" sortable width="160"></el-table-column>
        <el-table-column prop="payerAccount" label="付款人账号" sortable width="250"></el-table-column>
        <el-table-column prop="payerName" label="付款人名称" sortable width="200"></el-table-column>
        <el-table-column prop="payeeAccount" label="收款人账号" sortable width="250"></el-table-column>
        <el-table-column prop="payeeName" label="收款人名称" sortable width="250"></el-table-column>
      </el-table>
      <div style="margin-top: 20px; margin-bottom: 50px">
        <div class="page">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[5, 10, 20, 40]"
            :page-size="10"
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="20"
          ></el-pagination>
        </div>
      </div>
    </el-form>
  </el-dialog>
</template>

<script>
export default {
  name: "snapImportTemplate",

  data() {
    return {
      currentPage4: 1, // 分页
      // 是否显示弹出层
      isImportTemplate: false,
      // 来源标识 为了服用区分是哪个选项触发的
      fromFlag: "",

      form: {
        businessType: "1", // 业务类型
        payerAccount: "", // 付款人账号
        payerName: "", // 付款人名称
        payeeAccount: "", // 收款人账号
        payeeName: "", // 收款人名称
      },

      tableData: [
        {
          businessType: "A108-现金汇款", // 业务类型
          payerAccount: "3124321445324543", // 付款人账号
          payerName: "李四", // 付款人名称
          payeeAccount: "43261324686548", // 收款人账号
          payeeName: "赵六", // 收款人名称
        },
        {
          businessType: "A108-现金汇款", // 业务类型
          payerAccount: "3124321445324543", // 付款人账号
          payerName: "李四", // 付款人名称
          payeeAccount: "43261324686548", // 收款人账号
          payeeName: "赵六", // 收款人名称
        },
        {
          businessType: "A108-现金汇款", // 业务类型
          payerAccount: "3124321445324543", // 付款人账号
          payerName: "李四", // 付款人名称
          payeeAccount: "43261324686548", // 收款人账号
          payeeName: "赵六", // 收款人名称
        },
        {
          businessType: "A108-现金汇款", // 业务类型
          payerAccount: "3124321445324543", // 付款人账号
          payerName: "李四", // 付款人名称
          payeeAccount: "43261324686548", // 收款人账号
          payeeName: "赵六", // 收款人名称
        },
        {
          businessType: "A108-现金汇款", // 业务类型
          payerAccount: "3124321445324543", // 付款人账号
          payerName: "李四", // 付款人名称
          payeeAccount: "43261324686548", // 收款人账号
          payeeName: "赵六", // 收款人名称
        },
        {
          businessType: "A108-现金汇款", // 业务类型
          payerAccount: "3124321445324543", // 付款人账号
          payerName: "李四", // 付款人名称
          payeeAccount: "43261324686548", // 收款人账号
          payeeName: "赵六", // 收款人名称
        },
      ],
    };
  },

  methods: {
    // 表单重置
    reset() {
      this.resetForm("addForm");
      this.$set(this, "form", {});
    },
    handleClose() {
      this.isImportTemplate = false;
    },

    show(fromFlag = "") {
      console.log("show");
      this.fromFlag = fromFlag;
      this.isImportTemplate = true;
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },

    // 选择
    choose(index, rows) {
      this.$emit("choose", rows[index], this.fromFlag);
      this.isImportTemplate = false;
    },

    //重置
    reset() {
      console.log("重置");
      this.resetForm("form");
    },

    // 修改
    search(row) {
      console.log("修改");
    },
  },
};
</script>

<style>
.page {
  float: right;
}
</style>
